<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘点击事件</title>
    <style>
        input {width: 200px;padding: 8px;font-size: 16px;outline: none;border: 1px dashed #4caf50;}
        input:focus {border: 1px solid red;}
    </style>
</head>
<body>

    <div>
        <input type="text">
    </div>

    <script>
        var inputEle = document.querySelector('input');

        var onKeyClick = function(e) {
            console.log(e);
            alert('现在输入框内容是：' + e.detail.value + '，触发的键是：' + e.detail.keyCode);
        };

        inputEle.addEventListener('keyup', (e) => {
            console.log('键盘按键弹起了');

            var keyClick = new CustomEvent('keyclick', {
                detail: {
                    value: e.target.value,
                    keyCode: e.keyCode,
                },
            });

            inputEle.addEventListener('keyclick', onKeyClick);

            inputEle.dispatchEvent(keyClick);

            inputEle.removeEventListener('keyclick', onKeyClick);
        });
    </script>
</body>
</html>